<%--
  Created by IntelliJ IDEA.
  User: MyUser
  Date: 2025/4/11
  Time: 11:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 页面元信息 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap 5 CSS from jsDelivr CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

    <title>用户注册</title>

    <style>
        /* 自定义样式 */
        body {
            background-color: #f8f9fa;
        }
        .register-container {
            max-width: 800px;
            margin: 3rem auto;
            padding: 2rem;
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }
        .form-title {
            text-align: center;
            margin-bottom: 2rem;
            color: #333;
        }
        .avatar-preview {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #ddd;
            display: block;
            margin: 0 auto 1rem;
        }
        .avatar-upload {
            text-align: center;
        }
        .role-option {
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 1rem;
            margin-bottom: 1rem;
            cursor: pointer;
            transition: all 0.3s;
        }
        .role-option:hover {
            border-color: #0d6efd;
            background-color: #f8f9fa;
        }
        .role-option.selected {
            border-color: #0d6efd;
            background-color: #e7f1ff;
        }
        .role-option input[type="radio"] {
            display: none;
        }
        .password-strength {
            height: 5px;
            background-color: #e9ecef;
            margin-top: 0.5rem;
            border-radius: 3px;
            overflow: hidden;
        }
        .password-strength-bar {
            height: 100%;
            width: 0%;
            transition: width 0.3s;
        }
        .password-requirements {
            font-size: 0.85rem;
            color: #6c757d;
            margin-top: 0.5rem;
        }
        .password-requirements .valid {
            color: #198754;
        }
        .password-requirements .invalid {
            color: #6c757d;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="register-container">
        <h2 class="form-title">创建新账户</h2>

        <form id="registerForm" enctype="multipart/form-data">
            <!-- 头像上传 -->
            <div class="mb-4 avatar-upload">
                <img id="avatarPreview" src="https://via.placeholder.com/120" alt="头像预览" class="avatar-preview">
                <input type="file" id="avatar" name="avatar" accept="image/*" class="d-none">
                <button type="button" class="btn btn-outline-primary" onclick="document.getElementById('avatar').click()">
                    <i class="bi bi-upload"></i> 上传头像
                </button>
                <div class="form-text">支持JPG, PNG格式，大小不超过2MB</div>
            </div>

            <!-- 基本信息 -->
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="username" class="form-label">昵称</label>
                    <input type="text" class="form-control" id="username" name="username" required>
                    <div class="invalid-feedback">请输入有效的昵称</div>
                </div>

                <div class="col-md-6 mb-3">
                    <label for="email" class="form-label">电子邮箱</label>
                    <input type="email" class="form-control" id="email" name="email" required>
                    <div class="invalid-feedback">请输入有效的邮箱地址</div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="password" class="form-label">密码</label>
                    <input type="password" class="form-control" id="password" name="password" required>
                    <div class="password-strength">
                        <div class="password-strength-bar" id="passwordStrengthBar"></div>
                    </div>
                    <div class="password-requirements">
                        <div id="lengthReq" class="invalid"><i class="bi bi-circle"></i> 至少8个字符</div>
                        <div id="numberReq" class="invalid"><i class="bi bi-circle"></i> 包含数字</div>
                        <div id="letterReq" class="invalid"><i class="bi bi-circle"></i> 包含字母</div>
                    </div>
                </div>

                <div class="col-md-6 mb-3">
                    <label for="confirmPassword" class="form-label">确认密码</label>
                    <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" required>
                    <div class="invalid-feedback">两次输入的密码不一致</div>
                </div>
            </div>

            <!-- 角色选择 -->
            <div class="mb-4">
                <label class="form-label">角色</label>
                <div class="row">
                    <div class="col-md-6">
                        <label class="role-option" id="studentOption">
                            <input type="radio" name="role" value="student" checked>
                            <div class="text-center">
                                <i class="bi bi-person-video3" style="font-size: 2rem; color: #0d6efd;"></i>
                                <h5 class="mt-2">学生</h5>
                                <p class="text-muted small">注册为学生账号</p>
                            </div>
                        </label>
                    </div>
                    <div class="col-md-6">
                        <label class="role-option" id="teacherOption">
                            <input type="radio" name="role" value="teacher">
                            <div class="text-center">
                                <i class="bi bi-person-check-fill" style="font-size: 2rem; color: #198754;"></i>
                                <h5 class="mt-2">教师</h5>
                                <p class="text-muted small">注册为教师账号</p>
                            </div>
                        </label>
                    </div>
                </div>
            </div>

            <!-- 可选信息 -->
            <div class="mb-4">
                <label for="bio" class="form-label">个人简介 (可选)</label>
                <textarea class="form-control" id="bio" name="bio" rows="3"></textarea>
            </div>

            <!-- 协议同意 -->
            <div class="mb-4 form-check">
                <input type="checkbox" class="form-check-input" id="agreeTerms" name="agreeTerms" required>
                <label class="form-check-label" for="agreeTerms">我已阅读并同意<a href="#" data-bs-toggle="modal" data-bs-target="#termsModal">《用户协议》</a></label>
                <div class="invalid-feedback">您必须同意用户协议才能注册</div>
            </div>

            <!-- 提交按钮 -->
            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-primary btn-lg">立即注册</button>
                <div class="text-center mt-3">
                    已有账号？<a href="Login.jsp">立即登录</a>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 用户协议模态框 -->
<div class="modal fade" id="termsModal" tabindex="-1" aria-labelledby="termsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="termsModalLabel">用户协议</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h6>1. 服务条款的接受</h6>
                <p>通过访问和/或使用本网站，您表示同意接受本服务条款的所有条款和条件...</p>

                <h6>2. 服务说明</h6>
                <p>本网站为用户提供在线学习平台服务...</p>

                <h6>3. 用户行为规范</h6>
                <p>用户在使用本服务时，必须遵守中华人民共和国相关法律法规...</p>

                <h6>4. 隐私政策</h6>
                <p>我们重视用户的隐私，您的注册信息和其他个人信息将受到保护...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">我已阅读并同意</button>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap 5 JS Bundle with Popper from jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- 页面交互脚本 -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 头像预览
        document.getElementById('avatar').addEventListener('change', function(e) {
            if (this.files && this.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('avatarPreview').src = e.target.result;
                }
                reader.readAsDataURL(this.files[0]);
            }
        });

        // 角色选择样式切换
        document.getElementById('studentOption').addEventListener('click', function() {
            document.querySelectorAll('.role-option').forEach(el => el.classList.remove('selected'));
            this.classList.add('selected');
            document.querySelector('input[name="role"][value="student"]').checked = true;
        });

        document.getElementById('teacherOption').addEventListener('click', function() {
            document.querySelectorAll('.role-option').forEach(el => el.classList.remove('selected'));
            this.classList.add('selected');
            document.querySelector('input[name="role"][value="teacher"]').checked = true;
        });

        // 密码强度检测
        document.getElementById('password').addEventListener('input', function() {
            const password = this.value;
            let strength = 0;

            // 长度要求
            const hasLength = password.length >= 8;
            document.getElementById('lengthReq').className = hasLength ? 'valid' : 'invalid';
            document.getElementById('lengthReq').innerHTML =
                `<i class="bi ${hasLength ? 'bi-check-circle' : 'bi-circle'}"></i> 至少8个字符`;

            if (hasLength) strength += 25;

            // 数字要求
            const hasNumber = /\d/.test(password);
            document.getElementById('numberReq').className = hasNumber ? 'valid' : 'invalid';
            document.getElementById('numberReq').innerHTML =
                `<i class="bi ${hasNumber ? 'bi-check-circle' : 'bi-circle'}"></i> 包含数字`;

            if (hasNumber) strength += 25;

            // 字母要求
            const hasLetter = /[a-zA-Z]/.test(password);
            document.getElementById('letterReq').className = hasLetter ? 'valid' : 'invalid';
            document.getElementById('letterReq').innerHTML =
                `<i class="bi ${hasLetter ? 'bi-check-circle' : 'bi-circle'}"></i> 包含字母`;

            if (hasLetter) strength += 25;

            // 特殊字符要求
            const hasSpecial = /[^a-zA-Z0-9]/.test(password);
            if (hasSpecial) strength += 25;

            // 更新强度条
            const strengthBar = document.getElementById('passwordStrengthBar');
            strengthBar.style.width = strength + '%';

            if (strength < 50) {
                strengthBar.style.backgroundColor = '#dc3545'; // 红色
            } else if (strength < 75) {
                strengthBar.style.backgroundColor = '#fd7e14'; // 橙色
            } else {
                strengthBar.style.backgroundColor = '#198754'; // 绿色
            }
        });

        // 密码确认验证
        document.getElementById('confirmPassword').addEventListener('input', function() {
            const password = document.getElementById('password').value;
            const confirmPassword = this.value;

            if (confirmPassword && password !== confirmPassword) {
                this.classList.add('is-invalid');
            } else {
                this.classList.remove('is-invalid');
            }
        });

        // 表单提交
        document.getElementById('registerForm').addEventListener('submit', function(e) {
            e.preventDefault();

            // 验证表单
            let isValid = true;

            // 检查必填字段
            const requiredFields = ['username', 'email', 'password', 'confirmPassword'];
            requiredFields.forEach(fieldId => {
                const field = document.getElementById(fieldId);
                if (!field.value.trim()) {
                    field.classList.add('is-invalid');
                    isValid = false;
                } else {
                    field.classList.remove('is-invalid');
                }
            });

            // 检查密码匹配
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            if (password !== confirmPassword) {
                document.getElementById('confirmPassword').classList.add('is-invalid');
                isValid = false;
            }

            // 检查协议同意
            if (!document.getElementById('agreeTerms').checked) {
                document.getElementById('agreeTerms').classList.add('is-invalid');
                isValid = false;
            } else {
                document.getElementById('agreeTerms').classList.remove('is-invalid');
            }

            if (isValid) {
                // 这里应该有AJAX提交表单数据
                alert('注册成功！即将跳转到登录页面');
                // window.location.href = 'login.jsp';
            }
        });
    });
</script>
</body>
</html>
